<template>
  <view class="category-container">
    <text class="title">分类</text>
    <button class="test-btn" @click="goToTestPage">使用封装路由跳转到测试页面</button>
    <button class="test-btn" @click="goToHome">跳转到首页(tabbar)</button>
  </view>
</template>

<script setup>
import { getCurrentInstance } from 'vue';
import { ref, onMounted } from 'vue';

// 页面数据
const categories = ref([]);

// 生命周期钩子
onMounted(() => {
  console.log('分类页面加载完成');
  // 可以在这里请求分类数据
});

// 获取全局路由对象
const { proxy } = getCurrentInstance();
const $Router = proxy.$Router;

// 使用封装的路由跳转
const goToTestPage = () => {
  $Router.push({
    name: 'test',
    query: { id: 1, name: '测试' }
  });
};

// 跳转到tabbar页面
const goToHome = () => {
  $Router.push({
    name: 'home'
  });
};
</script>

<style scoped>
.category-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.title {
  font-size: 32rpx;
  color: #333;
}
</style>